<template>
    <div>
        <div v-if="this.$store.state.peimanage">
             <!--1-->
            <el-row class="nav_a_top">
                <el-col :span="12"><div class="grid-content bg-purple">配送列表</div></el-col>
                <el-col :span="12" @click.native="addcangui"><div class="grid-content bg-purple-light"><div class="nav_a_top_div">添加配送员</div></div></el-col>
            </el-row>
            <!--2-->
            <form class="dingdan_form">
                    <input type="text" placeholder="手机号">
                    <input type="text" placeholder="姓名">
                    <button class="dingdan_form_shaixuan">筛选</button>
            </form>
            <!--3-->
            <table class="nav_a_table fs12">
                        <tr>
                            <td>ID</td>
                            <td>姓名</td>
                            <td>手机号</td>
                            <td>性别</td>
                            <td>身份证号</td>
                            <td>所属公司</td>
                            <td>添加时间</td>
                            <td>备注</td>
                            <td>状态</td>
                            <td>配送餐柜</td>
                            <td>操作</td>
                        </tr>
                        <tr>
                            <td>0371001</td>
                            <td>阿达西</td>
                            <td>12222222222</td>
                            <td>男</td>
                            <td>2222221222222222222</td>
                            <td>美地</td>
                            <td>2017-09-07 10:09</td>
                            <td>暂无</td>
                            <td>正常</td>
                            <td><button class="nav_a_button">海汇中心001柜</button><span class="el-icon-caret-bottom iconbottom fs24"></span></td>
                            <td><button class="nav_a_button">详情</button><button class="nav_a_button">禁用</button></td>
                        </tr>
            </table>   
        </div>
        <div  v-if="this.$store.state.peiadd">
            <peiaddzj></peiaddzj>
        </div>
    </div>
</template>
<script>
    import peiaddzj from './cangui_tjpsy.vue'
export default {
  name:'psygl',
  data () {
    return {
    }
  },
  methods:{
            addcangui:function(){
                this.$store.state.peimanage=false;
                this.$store.state.peiadd=true;
            },
  },
  components:{
      peiaddzj,
  }
}
</script>
<style scoped>
/*1*/
.nav_a_top{height: 40px;background-color: white;padding: 10px;}
.nav_a_top>div:nth-child(2){text-align: center;}
.nav_a_top_div{width: 100px;float: right;border: 1px solid #A9A9A9;}
/*2*/
.dingdan_form{margin: 25px 0px 45px 0px;}
.dingdan_form input{padding: 4px 0px 4px 7px;}
.nav_sel{padding: 4px 0px 4px 7px;box-sizing: border-box;width: 181px;margin-left: 10px;position:relative ;top:2px;}
.dingdan_form_shaixuan{background-color: white;border: 1px solid #bbb;width: 80px;height: 30px;display: inline-block;border-radius: 7px;margin-left: 10px;background-color: #bbb;}
/*3*/
.nav_a_table{width: 100%;height: 60px;}
.nav_a_table>tr:nth-child(1) td{height: 60px;background-color: #cdcdcd;border: 1px solid #bbbbbb;box-sizing: border-box;text-align: center}
.nav_a_table>tr td{height: 60px;background-color: white;border: 1px solid #bbbbbb;box-sizing: border-box;text-align: center;}
.nav_a_button{padding: 3px;box-sizing: border-box;margin-right:5px;}
.nav_a_table table{padding: 3px;}
.iconbottom{float: right}
</style>